<template>
  <div class="app-container">
    <el-col :span="24" :xs="24">
      <el-form
        ref="queryForm"
        :inline="true"
        label-width="68px"
        :model="queryParams"
      >
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="dateRange"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="完成状态" prop="own">
          <el-select
            v-model="queryParams.own"
            placeholder="请选择"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          >
            <el-option label="自己完成" value="1" />
            <el-option label="系统完成" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <!-- 每日总结内容区域 -->
      <el-timeline reverse>
        <el-timeline-item
          v-for="item in summaryList"
          :timestamp="item.createTime"
          placement="top"
          :icon="item.own === '1' ? 'el-icon-check' : 'el-icon-close'"
          :color="item.own === '0' ? '#e6a23c' : '#0abf53'"
          size="large"
          :key="item.sId"
        >
          <el-card shadow="hover">
            <p
              v-html="item.content"
              class="ql-editor"
              @dblclick="handleClick(item.sId)"
            ></p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-col>
  </div>
</template>

<script>
import { listSummary } from "@/api/system/summary";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "User",
  components: {},
  data() {
    return {
      // 总结相关数据
      summaryList: [],
      // 遮罩层
      loading: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        own: "",
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 跳转修改
    handleClick(arg) {
      this.$router.push({ path: "/summary/edit", query: { id: arg } });
    },
    /** 查询总结列表 */
    getList() {
      this.loading = true;
      listSummary(this.addDateRange(this.queryParams, this.dateRange))
        .then((res) => {
          // console.log(res.data);
          this.summaryList = res.data;
        })
        .catch((err) => {
          console.log(err);
          this.msgError(err.message);
        });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      // 搜索
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>

<style scoped>
.app-container .router-link-active {
  background-color: green;
  font-size: larger;
  color: aliceblue;
}
</style>